{% extends "index.html" %}

{% block css-javascript-agregados %}		
	<!-- SEXYSELECT -->
	<link 	type="text/css" 		href="static/ui.sexyselect/css/ui.sexyselect.0.55.css" 			rel="stylesheet"/>
	<script type="text/javascript" 	src="static/ui.sexyselect/js/ui.sexyselect.min.0.6.js" >		</script>
{% endblock %}

{% block content %}
  <div id="container_upper" style="width: 97%">
  <!--<form name="permission" method="get" action="/comunidadcyt/accounts/assign/permission/{{objuser.username}}">-->
    <div class="row">
      <span class="left"><img class="img_border" width="128px" height="128px" src="{{objuser.get_profile.foto.url}}"/></span>
      <span class="right ui-corner-all" style="width:70%">
        <h4>{{objuser.first_name}} {{objuser.last_name}}</h4>
        <!--{#{% if usertype_list %}#}
          <ul>
          {#{% for ut in usertype_list %}#}
            <li><h3>{{ut.usertype.tipo_usuario}}</h3></li>
          {#{% endfor %}#}
          </ul>
        {#{% else %}#}
          <p><i>No se ha asignado un tipo de usuario al usuario</i></p>
        {#{% endif %}#}-->
      </span>
    </div>
  </div>
  {% if available_perms or assigned_perms %}
  
  
  
  <div id="container_existentes" style="width:97%">
      <div class="row">
      	<form name="formulario" method="GET">{% csrf_token %}
			
          <select id="available_perm" multiple="true" name="available_perm">
          {% for perm in available_perms %}
            <option value="{{perm}}">{{perm}}</option>
          {% endfor %}
          </select>
          
          <div id="medio" class="center">
				<button class="center" onclick="asignar()"><span class="ui-icon ui-icon-circle-arrow-s"></span></button>
				<button class="center" onclick="quitar()"><span class="ui-icon ui-icon-circle-arrow-n"></span></button>
          </div>
          
          <select id="assigned_perm" multiple="true" name="assigned_perm">
          {% for perm in assigned_perms %}
            <option value="{{perm}}">{{perm}}</option>
          {% endfor %}
          </select>
          
        </form>
      </div>
    </div>

    
    

    {% endif %}

  <script type="text/javascript">
  /*(function($) {
	var field = null;
	})(django.jQuery); */
  
    function quitar() {
    	document.forms["formulario"].action="/comunidadcyt/accounts/permission/remove/{{objuser.id}}";
  		document.forms["formulario"].submit();
  		return false;
  	}
  	function asignar() {
    	document.forms["formulario"].action="/comunidadcyt/accounts/permission/assign/{{objuser.id}}";
  		document.forms["formulario"].submit();
  		return false;
  	}
  
    $("a.assperm_add").button({icons:{primary:'ui-icon-gear'}});
    $("a.assperm_rem").button({icons:{primary:'ui-icon-minus'}});
    $('#assigned_perm').sexyselect({ title: 'Permisos Asignados', 
                                    allowInput: false,
                                    allowFilter: true,
                                    allowDelete: false,
                                    width: '300',
                                  });
    $('#available_perm').sexyselect({ title: 'Permisos Existentes', 
                                    allowInput: false,
                                    allowFilter: true,
                                    allowDelete: false,
                                    width: '300',
                                    onitemcreating: function(){
                                      $.post("/comunidadcyt/permissions/ajax/register/xhr/",
                                            {option:$("#available_perm_addText").val()},
                                            function (data)
                                            {
                                              if (data.ok != true)
                                              {
                                                $('#available_perm').sexyselect('showError',data.errors,2500)
                                                $("#available_perm option[value='"+data.perm+"']").remove();
                                              }  
                                            },
                                            "json"
                                      );
                                    }
                                  });
    

  </script>
{% endblock %}